<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<style type="text/css">
			#search-container
			{
				width: 500px;
				height:200px;
				margin: 10px auto 0 auto;
			}
			#search-container *
			{
				display: block;
			}
			#results
			{
				margin-top: 20px;
			}
			.result
			{
				width: 320px;
				height: 200px;
				float:left;
				margin-right: 10px;
				border: 1px solid black;
				box-sizing: border-box;
			}

			.info
			{
				float: left;
				width: 218px;
			}

			.image
			{
				float: left;
				width: 100px;
			}
			.imgae img{
				max-width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="search-container">
			<label for="term">What are you looking for?</label>
			<input type="text" name="term" id="term" value="" placeholder="german food, restaurant, hotel, etc" ></input>

			<label for="location">Where?</label>
			<input type="text" name="location" id="location" value="" placeholder="San Francisco, London, etc."></input>

			<button id="search">Search</button>
		</div>
		<div id="results">
		</div>
	</body>
	<script type="text/javascript">
			(function(){
			var searchCriteria = {
				term: "",
				location: ""
			};
			function getURL(page){
				var urlArray = document.URL.split("/");
				urlArray[urlArray.length - 1] = page;
				var url = urlArray.join("/");
				return url;
			};
			function doSearch()
			{
				debugger;	
				var url = getURL("yelp.php");
				$.post(url, searchCriteria, displayResults);
			};

			function displayResults(results)
			{
				results = JSON.parse(results);
				var resArr = results.businesses;
				var resCont = $("#results");
				resCont.empty();
				if(!resArr || resArr.length == 0)
				{
					resCont.append($("<p>No results found.</p>"));
				}
				for(var i = 0; i < resArr.length; i++)
				{
					var res = resArr[i];
					var dispAddress = res.location.display_address;
					var cont = "<div class='result'> <div class='info'><p>Title: "+res.name+"</p><img src='"+res.rating_img_url+"' /><p>Address: "+dispAddress[0]	+", "+dispAddress[1]	+", "+dispAddress[2]	+"</p><a href='"+res.url+"'>External link</a></div><div class='image'><img src='"+res.image_url+"' /></div></div>";
					resCont.append($(cont));
				}
			};

			function initialize()
			{
				$("#term").on("change", function(){
					searchCriteria.term = $(this).val();
				});

				$("#location").on("change", function(){
					searchCriteria.location = $(this).val();
				});

				$("#search").on("click", function()
				{
					doSearch();
				});

			};

			initialize();
		})();
		</script>
</html>